<template>
	<view class="content">
		<view class="gradient-bg" style="min-height: 300rpx;">
			<view class="s-input-wrap">
				<view class="s-input-box flex-row">
					<input v-model="searchValue" class="s-input flex1" style="text-align: left;"
						placeholder="请输入 / 扫描物料编号、物料名称、条码" @confirm="searchBarcode" />
					<icon type="search" size="22" @click="searchBarcode" color="#4599AD" class="icon" />
				</view>
			</view>
			<view class="list-card-wrap">
				<view style="margin: 0 0 16rpx 0;">
					<text class="gray-text">查询结果{{tableData.length}}条</text>
				</view>
				<view class="list-card" v-for="(item,index) in tableData" :key="index" @click="showPrintDialog(item)">
					<view class="flex-row-between">
						<view class="flex-row">
							<text class="gray-text">条码</text>
							<text class="black-text-34" style="margin-left: 20rpx;">{{item.barCode}}</text>
						</view>
					</view>
					<view class="content flex-row">
						<view class="flex-column flex1">
							<text class="gray-text">物料名称</text>
							<text class="black-text">{{item.productName}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">物料编码</text>
							<text class="black-text">{{item.productNo}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">数量</text>
							<text class="blue-text">{{item.quantity}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex-row-between">
							<text class="gray-text">创建时间</text>
							<text class="gray-text">{{item.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<popup ref="printDialog" @beforeClosed="beforeClosed" @handleCheck="handleCheck" confirmText="确认打印">
			<view class="">
				<view class="flex-row-start"><text class="gray-text font-30">条码：</text><text class="font-34">{{info.barCode}}</text></view>
				<view class="flex-row-start"><text class="gray-text font-30">物料编号：</text><text class="font-34">{{info.productNo}}</text></view>
				<view class="flex-row-start"><text class="gray-text font-30">物料名称：</text><text class="font-34">{{info.productName}}</text></view>
				<view class="flex-row-start"><text class="gray-text font-30">数量：</text><text class="font-34">{{info.quantity}}</text></view>
				<!-- <view class="flex-row-start" style="margin-top: 16rpx;">
					<text class="gray-text font-30">处理方式：</text>
					<picker @change="(arr)=>bindPickerActualValue(arr,item)" :value="processMode.value" :range="processModeList" range-key="label">
						<view class="black-text font-34">{{processMode.label}}</view>
					</picker>
				</view> -->
			</view>
		</popup>
	</view>
</template>

<script>
	import {
		searchBarcode
	} from "./api"
	
	var printModule = uni.requireNativePlugin("pda-print-PdaPrintModule")

	export default {
		data() {
			return {
				searchValue: '',
				tableData: [],
				info:{}
			}
		},
		onLoad: function() {
			// this.stock();
		},
		onNavigationBarButtonTap(obj) {
			if (obj.text == '重置') {
				this.searchValue = '';
				this.tableData = [];
			}
		},
		methods: {
			toPage(page) {
				this.$tab.navigateTo(page);
			},
			searchBarcode() {
				searchBarcode({
					noOrName: this.searchValue,
					pageNum: 1,
					pageSize: 0
				}).then(res => {
					this.tableData = res.rows
				})
			},
			beforeClosed(){
				this.info = {}
			},
			showPrintDialog(item){
				this.info = {}
				this.info = item
				this.$refs.printDialog.open()
			},
			handleCheck(){
				this.$modal.confirm('是否确认打印').then(() => {
					this.$modal.loading("加载中...")
					printModule.printLabelAsync({
						'barcode': this.info.barCode,
						'title': this.info.barCode + '\n\n物料编号：'+ this.info.productNo + '\n数量：'+this.info.quantity,
						'distance': 500,
					},(ret) => {
						this.$modal.closeLoading()
						console.log(ret);
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.status_icon {
		width: 56rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		border-radius: 50%;
	}

	.status_icon1 {
		background-color: #3ECBBD;
	}

	.status_icon2 {
		background-color: #F96C56;
	}

	.status1 {
		background: linear-gradient(133deg, #4599AD 0%, #3ECBBD 100%) !important;
	}

	.status2 {
		background: linear-gradient(133deg, #F89861 0%, #F96C56 100%) !important;
	}
</style>
